<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    使用组件标签时 如何实现项组件内部传递参数
    props   接收组件传参
    父组件 -> 子组件

-->
<div id="app">
    <!--    使用组件标签时 通过添加标签属性 实现向组件内部传递参数  v-bind   -->
    <blog title="博客标题1"></blog>
    <!--    动态的将vm数据 传递到 子组件 blog中-->
    <blog :title="title"></blog>
    <hr>
    <!--    列表渲染-->
    <blog v-for="b in blogs" :title="b"></blog>
</div>

<script>
    /*博客组件*/
    let blog = {
        template: `
          <div>
            <h2>{{ title }}</h2>
          </div>
        `,
        // 数组中的元素表示需要接收的参数  组件标签中填写的标签属性名   props接收的值依然可以通过this关键词访问  等同 data中的属性值
        props: ['title']
    }
    let vm = new Vue({
        el: '#app',
        data: {
            title: "vm 博客标题1",
            blogs: ["博客标题1", "博客标题2", "博客标题3", "博客标题4"]
        },
        components: {
            blog
        }
    })


</script>


</body>
</html>